<template>
  <!-- 主体卡片容器，最大宽度居中 -->
  <div class="mt-10 px-4 sm:px-8 lg:px-40">
    <div class="flex flex-col lg:flex-row gap-8">
      <!-- 主内容区 -->
      <Article :id="id" :article="article" />

      <!-- 桌面端右侧目录 -->
      <div class="hidden lg:block">
        <WinCatalog :editor-id="id" :scroll-element="scrollElement" />
      </div>
    </div>

    <!-- ✅ 移动端目录遮罩层 -->
    <MobileCatalog :editor-id="id" :scroll-element="scrollElement" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getArticleDetail } from '@/apis/blog/article'
import 'md-editor-v3/lib/preview.css'
const scrollElement = document.documentElement
const route = useRoute()
const article = ref()
const id = 'preview-only'
onMounted(async () => {
  const id = Number(route.params.id)
  if (id) {
    article.value = await getArticleDetail(id)
  }
})
</script>
